<script setup>
import { ref } from 'vue'
import { getProductOrderService, getProductOrderDetailService } from '@/api/order'
// const orderList = [
//   {
//     order: '黑茶',
//     date: '2023.10.26',
//     userName: '清清',
//     state: '已支付',
//     price: '￥422.00',
//     address: '福建省南平市武夷学院'
//   },
//   {
//     order: '大红袍',
//     date: '2023.11.25',
//     userName: '静静',
//     state: '未支付',
//     price: '￥468.00',
//     address: '福建省南平市武夷学院'
//   }
// ]
const params = ref({
  page:1,
  pageSize:5
})
const total=ref(10)
const orderDetail = ref({})
let dialogTableVisible=ref(false)
const orderId=ref()
// const showOrder=(row)=>{
//   // dialogTableVisible = true
//   console.log(row.id);
//   orderId.value=row.id
  
//   console.log('6666666666666666',res.data);
//   dialogTableVisible.value = true
// }
console.log(orderId.value);
const orderList = ref()
const getOrderList = async () => {
  console.log('333333333');
  const res = await getProductOrderService(params.value)
  console.log('---------------------');
  console.log('2222222',res.data)
  orderList.value = res.data.data.records
  console.log('8998989898',res.data.data.records);
  console.log('0000000000',res.data.data.total);
  total.value  = res.data.data.total
  orderList.value=orderList.value.map((item)=>{
    if(item.payStatus=='0')
      item.payStatus="已支付"
    else
      item.payStatus="未支付"
    return item
  })
  // console.log("test-------------------",test)
}
const getOrderDetail = async(id) => {
 
  const res = await getProductOrderDetailService(id)
  orderDetail.value = res.data.data.products
  console.log('8998989898',);
  dialogTableVisible.value=true
  console.log("dialogTableVisible",dialogTableVisible)
  console.log("orderDetail",orderDetail.value)
}
getOrderList()
console.log('5555555555555555555');
// const getOrderDetail = async () => {
  
//   console.log('44444444444');
//   console.log(res.data.data);
//   orderDetail.value = res.data.data
  
// }
// getOrderDetail()

const handleSizeChange = (size) => {
  console.log('当前每页条数数',size);
  params.value.page = 1
  params.value.pageSize = size
  getOrderList()

}
const handleCurrentChange = (page) => {
  console.log('当前页数',page);
  params.value.page = page
  getOrderList()
}

</script>

<template>
  <!-- <div>{{ orderList }}</div> -->
  <div>
  <el-table :data="orderList" style="width: 100%;" class="header" :default-sort="{ prop: 'date', order: 'descending' }">
    <el-table-column prop="id" label="订单" width="100">
      <template #default="{ row }">
        <el-button color="#27bd9b" @click="getOrderDetail(row.id)">{{ row.id }}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="time" label="日期" width="150" sortable></el-table-column>
    <el-table-column prop="userName" label="买家" width="150"></el-table-column>
    <el-table-column prop="payStatus" label="支付状态" width="100"></el-table-column>
    <el-table-column prop="totalPrice" label="价格" width="150" sortable></el-table-column>
    <el-table-column prop="address.address" label="地址" width="200"></el-table-column>
  </el-table>
  </div>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="params.page"
      v-model:page-size="params.pageSize"
      :page-sizes="[5,10,20]"
      :background="true"
      layout="total, sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog v-model="dialogTableVisible" title="订单详情" width="500">
          <el-table :data="orderDetail">
            <el-table-column property="name" label="商品名称" width="150" />
            <el-table-column property="price" label="价格" width="200" />
            <el-table-column property="count" label="商品数量" />
          </el-table>
        </el-dialog>
</template>
<style lang="scss" scoped>
.header {
  margin-top: 50px;
  margin-left: 10px;
}
.example-pagination-block {
  margin-top: 180px;
}
</style>